import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
import { Form, Input, Button, Space, Radio, Upload, message, Cascader, DatePicker } from 'antd';
import { Row, Col } from 'antd';
import '../../static/css/visitors/add_upd.css'
import { useEffect, useState } from 'react'
import add from '../../apis/visitors/add'
// 上传
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
const getBase64 = (img: RcFile, callback: (url: string) => void) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result as string));
    reader.readAsDataURL(img);
};
// 定义添加接口
const beforeUpload = (file: RcFile) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
};
// 级联选择器

interface Option {
    value: string | number;
    label: string;
    children?: Option[];
}
const options: Option[] = [
    {
        value: '经营',
        label: '经营',
        children: [
            {
                value: '合作单位',
                label: '合作单位',
                children: [
                    {
                        value: '乐柠教育',
                        label: '乐柠教育',
                    },
                ],
            },
        ],
    },

];
const opt: Option[] = [
    {
        value: '河北',
        label: '河北',
        children: [
            {
                value: '邯郸',
                label: '邯郸',
                children: [
                    {
                        value: '大名',
                        label: '大名',
                    },
                ],
            },
        ],
    },
];
// 日期


const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
    // console.log('onOk: ', value);
}
const Add_Upd: React.FC = (): JSX.Element => {
    // 添加
    const [params, setP] = useState({})
    const onFinish = (values: any) => {
        // console.log(values)
        setP(values)
    };
    const hange = (
        value: DatePickerProps['value'] | RangePickerProps['value'],
        dateString: [string, string] | string,
    ) => {
        setP({...params,starttime:dateString,})
    };
    const change = (
        value: DatePickerProps['value'] | RangePickerProps['value'],
        dateString: [string, string] | string,
    ) => {
        setP({...params,endtime:dateString,})
    };
    
    
    const [form] = Form.useForm();

   
    const adds = async () => {
        const res = await add(params)
        console.log(params)
        // console.log(res)
    }
    const addd:any=()=>{
        adds()
    }
    const onReset = () => {
        form.resetFields();
    };

    const onFill = () => {
        form.setFieldsValue({
            note: 'Hello world!',
            gender: 'male',
        });
    };

    const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };
    const layout = {
        labelCol: { span: 0 },
        wrapperCol: { span: 24 },
    };
    // 下拉菜单
    const handleChange = () => {
        form.setFieldsValue({ sights: [] });
    };
    const areas = [
        { label: 'Beijing', value: 'Beijing' },
        { label: 'Shanghai', value: 'Shanghai' },
    ];
    // 上传图片
    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState<string>();

    const onChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            getBase64(info.file.originFileObj as RcFile, url => {
                setLoading(false);
                setImageUrl(url);
            });
        }
    };

    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    );
    // 级联选择器
    const ange: any = (value: string[]) => {
        console.log(value);
    };
    return (
        <div style={{ padding: '0px 15px', backgroundColor: '#fff', overflowY: 'auto' }} >
            <h1>添加</h1>
            <div>
                <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                    <Row>
                        <Col span={12} className="lefts">
                            <Form.Item name="type" label="类型" rules={[{ required: true }]}>
                                <Radio.Group name="radiogroup" defaultValue={1}>
                                    <Radio value={1}>外来人员</Radio>
                                    <Radio value={2}>老师</Radio>
                                    <Radio value={3}>学生</Radio>
                                </Radio.Group>
                            </Form.Item>
                            <Form.Item name="username" label="访客名称" rules={[{ required: true }]}>
                                <Input placeholder='请输入访客名称' className='inp' />
                            </Form.Item>
                            <Form.Item name="mobile" label="手机号" rules={[{ required: true }]}>
                                <Input placeholder='请输入手机号' className='inp' />
                            </Form.Item>
                            <Form.Item name="openid" label="openid" rules={[{ required: true }]}>
                                <Input placeholder='请输入openid' className='inp' />
                            </Form.Item>
                            <Form.Item name="card" label="身份证号" rules={[{ required: true }]}>
                                <Input placeholder='请输入身份证号' className='inp' />
                            </Form.Item>
                            <Form.Item name="carnumber" label="车牌号" rules={[{ required: true }]}>
                                <Input placeholder='请输入车牌号' className='inp' />
                            </Form.Item>
                            <Form.Item name="reason" label="理由" rules={[{ required: true }]}>
                                <Input placeholder='请输入理由' className='inp' />
                            </Form.Item>
                            <Form.Item name="department" label="部门" rules={[{ required: true, message: 'Missing area' }]}>
                                <Cascader options={options} onChange={ange} placeholder="请选择" style={{ width: '298px', borderRadius: '5px' }} />
                            </Form.Item>
                            <Form.Item name="starttime" label="进校时间" rules={[{ required: true }]}>
                                <Space direction="vertical" size={12}>
                                    <DatePicker showTime onChange={hange} onOk={onOk} />
                                </Space>
                            </Form.Item>
                            <Form.Item name="endtime" label="离校时间" rules={[{ required: true }]}>
                                <Space direction="vertical" size={12}>
                                        <DatePicker showTime onChange={change} onOk={onOk} />
                                </Space>
                            </Form.Item>
                            <Form.Item name="area" label="地区" rules={[{ required: true, message: 'Missing area' }]}>
                                <Cascader options={opt} onChange={ange} placeholder="请选择" style={{ width: '298px', borderRadius: '5px' }} />
                            </Form.Item>
                            <Radio.Group name="radiogroup" defaultValue={62}>
                                <Form.Item name="is_area" label="是否去过高风险区">
                                    <Radio value={51}>是</Radio>
                                    <Radio value={62}>否</Radio>
                                </Form.Item>
                            </Radio.Group>
                            <div>
                                <Radio.Group name="radiogroup" defaultValue={32}>
                                    <Form.Item name="is" label="是否接触过高风险区">
                                        <Radio value={21}>是</Radio>
                                        <Radio value={32}>否</Radio>
                                    </Form.Item>
                                </Radio.Group>
                            </div>
                            <Radio.Group name="radiogroup" defaultValue={6}>
                                <Form.Item name="is_jing" label="是否离京">
                                    <Radio value={4}>是</Radio>
                                    <Radio value={5}>否</Radio>
                                    <Radio value={6}>学生</Radio>
                                </Form.Item>
                            </Radio.Group>
                            <div>
                                <Radio.Group name="radiogroup" defaultValue={7}>
                                    <Form.Item name="is_t" label="健康状态">
                                        <Radio value={7}>良好</Radio>
                                        <Radio value={8}>一般</Radio>
                                        <Radio value={9}>差</Radio>
                                    </Form.Item>
                                </Radio.Group>
                            </div>
                        </Col>
                        <Col span={12}>
                            <div className='update'>
                                <Form.Item name="travelcode" label="行程码">
                                    <Upload
                                        name="avatar"
                                        listType="picture-card"
                                        className="avatar-uploader"
                                        showUploadList={false}
                                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                        beforeUpload={beforeUpload}
                                        onChange={onChange}
                                    >
                                        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                                    </Upload>
                                </Form.Item>
                                <Form.Item name="yimiao" label="疫苗">
                                    <Upload
                                        name="avatar"
                                        listType="picture-card"
                                        className="avatar-uploader"
                                        showUploadList={false}
                                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                        beforeUpload={beforeUpload}
                                        onChange={onChange}
                                    >
                                        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                                    </Upload>
                                </Form.Item>
                                <Form.Item name="healthcode" label="健康码">
                                    <Upload
                                        name="avatar"
                                        listType="picture-card"
                                        className="avatar-uploader"
                                        showUploadList={false}
                                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                        beforeUpload={beforeUpload}
                                        onChange={onChange}
                                    >
                                        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                                    </Upload>
                                </Form.Item>
                                <Form.Item name="healthcode" label="核酸">
                                    <Upload
                                        name="avatar"
                                        listType="picture-card"
                                        className="avatar-uploader"
                                        showUploadList={false}
                                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                        beforeUpload={beforeUpload}
                                        onChange={onChange}
                                    >
                                        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                                    </Upload>
                                </Form.Item>
                            </div>
                            <div className='bottom'>
                                <Button>取消</Button>
                                <Button htmlType='submit' onClick={addd()} type="primary" >确认</Button>
                            </div>
                        </Col>
                    </Row>
                </Form>
            </div>

        </div>
    )
}
export default Add_Upd